<template>
  <view class="content" @tap="moreshowClose">


    <view class="pad032">
      <view class="swiperTop " style="padding: 40rpx 0 24rpx;">
        <u-swiper :list="swiperList"></u-swiper>
      </view>
      <view class="shopBox" style="margin-bottom:24rpx ;">
        <view class="flexColumn">
          <view class="shopTitle fs-36 yw-text-cut-2">
            <view class="">￥</view>
            <view class="money">
              <text class="big"> 160</text>.00/台
            </view>
            <view class="price">￥999</view>
          </view>
          <view class=" " style="color:#000000;margin-top: 18rpx ; display: flex;">
            购买须知：家用测试仪什么牌子好，购物更快，鸿心智行，快捷下单
          </view>

        </view>
      </view>
      <!-- tab栏切换动态改变激活样式 -->
      <view class="shopNav">
        <view class="flexAlginC">
          <view class="nav-list " v-for="(item, index) in navList" :key="item.id" @tap="changeAct(item)">
            <!-- 激活样式名字是红色 判断act==index 和act==item.id都行-->
            <view :class="[act == index ? 'name' : '']">
              <text>{{ item.name }}</text>
            </view>
            <!-- 名字下面的横线 -->
            <view :class="[act == index ? 'line' : '']"></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 评论 -->
    <view class="contenttabs pad32" v-if="content && content.id === 1">
      <view class="comments" v-for="(item, index) in commentslist" :key="index">
        <view class="commentone">
          <view>
            <image class="avatar" src="../static/image/pagesMine/user.png" mode="scaleToFill" />
          </view>
          <view style="flex:1;">
            <view class="person">
              <view>
                <text>匿名</text>
              </view>
              <view class="datatime">{{ item.evaluateCreateTime }}</view>
            </view>
            <view style="display: flex;">
              <image src="../static/image/pagesDelivery/Star.png"
                v-for="(itemStar, indexStar) in Math.floor(item.userRatingType)" :key="indexStar" />
              <image src="../static/image/pagesDelivery/halfwayStar.png" v-show="item.userRatingType % 1 !== 0" />
            </view>
          </view>
        </view>
        <view class="commenttwo">{{ item.userEvaluate }}</view>
        <view class="commentthree">
          <view v-for="(item, index) in item.evaluateImageList" :key="index">
            <image :src="item.evaluateAge" mode="scaleToFill" />
          </view>
        </view>
      </view>
    </view>
    <!-- 详情 -->
    <view class="contenttabs pad32" v-else>
      <view class="detail">
        <view class="title">
          【主营项目】
        </view>
        <view class="cont">
          可提供空调安装、移机、维修、加氟加氯、空调清洗保养回收服务
        </view>
        <view class="title">
          【店铺介绍】
        </view>
        <view class="cont">
          小张家电维修设立于2016年，坐落在蓟县渔阳镇
        </view>
        <view class="title">
          【服务描述】
        </view>
        <view class="ServiceListCss">
          <view class="flexAlginC" v-for='(ServiceItem, index) of ServiceList' :key="index">
            <view class="">
              {{ index + 1 }}、
            </view>
            <view class="flex_1">
              {{ ServiceItem }}
            </view>
          </view>
        </view>
        <view class="title">
          【服务优势】
        </view>
        <view class="cont">
          服务宗旨“诚信每一位顾客，缔造每一份和谐”，真诚服务，以质求量，本着一切为客户排忧解难，以信誉求发展
        </view>
        <view class="imgBottom">
          <image class=""
            src="https://ts1.cn.mm.bing.net/th?id=OIP-C.CxDCuKuuVVfXZ_eDRcfDuQHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2">
          </image>
          <image class=""
            src="https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2">
          </image>
          <image class=""
            src="https://ts2.cn.mm.bing.net/th?id=OIP-C.rK8sVSxdHp8-PBCeF69-eQEyDM&w=306&h=204&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2">
          </image>
        </view>
      </view>
      <view class="bottomshop">
      <view class="shopcar">
        <view class="round" @tap="stopshop">
          <image src="../static/image/pagesDelivery/round.png" mode="scaleToFill" />
          <view class="shoprightnum">
            <text>1</text>
          </view>
        </view>
        <view class="choose" @tap="stopshop">
          <view class="chooseprice">
            <text style="font-size:32rpx;">￥</text>
            <text>40</text>
          </view>
          
        </view>
        <view @tap="ordersshow" class="choosebutton">
          <text>提交订单</text>
        </view>
      </view>
    </view>
    </view>
    <ykAuthpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="CALL_PHONE" ></ykAuthpup>
  </view>
</template>

<script>
import { selectEvaluate } from '@/api/common'
import ykAuthpup from '@/components/yk-authpup/yk-authpup.vue'
let that = null;
export default {
  components: {
    ykAuthpup
  },
  data() {
    return {
      phoneAuth:'',
      runmoney: false,
      form: {
        note: "帮忙检查一下其他电器",
      },
      goods: {
        styles: ['全国发货', '支持代发', '可实地查看', '货真价实']
      }, //商品数据
      hasCollect: false, //是否已经收藏店铺
      reportFormTypeShow: false, //举报商家 类型
      reportFormTypeSelector: ['刷销量', '刷评价', '引导收藏,转单', '其他'],
      reportForm: {
        type: null,  //举报类型
        orderState: true,  //下单状态
        iphone: null, //电话
        note: null   //备注
      }, //投诉商家form

      swiperList: [{
        image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
        title: '昨夜星辰昨夜风，画楼西畔桂堂东'
      },
      {
        image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
        title: '身无彩凤双飞翼，心有灵犀一点通'
      },
      {
        image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
        title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
      }
      ], //轮播数据
      action: null,
      reportpop: false,
      listorders: [{
        title: "已下单"
      },
      {
        title: "未下单"
      }
      ],
      valuereport: "已下单",

      reportRules: {
        iphone: [{
          type: "number",
          required: true,
          message: "请输入手机号",
          trigger: ["change", "blur"]
        },
        {
          // 自定义验证函数，见上说明
          validator: (rule, value, callback) => {
            // 上面有说，返回true表示校验通过，返回false表示不通过
            // this.$u.test.mobile()就是返回true或者false的
            return this.$u.test.mobile(value);
          },
          maxlength: 11,
          message: "手机号码不正确",
          // 触发器可以同时用blur和change
          trigger: ["blur"]
        }
        ]
      },
      action: "http://www.example.com/upload",
      filesArr: [],

      id: '', //从页面跳转获取id,再进行获取数据
      moreShow: false,
      reportpop: false,
      statusBarHeight: 0,

      backaddlist: [], //选择的收货地址
      selectTime: null,
      selectTimeshow: false,
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
      }, //选择时间的组件

      count: 5,
      rate: 3.8,

      ordershow: false,

      act: 0,
      navList: [{
        id: 0,
        name: "产品详情",
      },
      {
        id: 1,
        name: "交易评价"
      }
      ],
      content: null,
      ServiceList: [
        '响应及时快速，服务周到；', '主营家用定频、变频空调，空调挂机柜机的空的 调移机、空调拆装、空调加氯等服务；', '空调拆装；'
      ],
      styles: [{
        color: '#FF0000',
        background: 'rgba(255,0,0,0.1)',
      }, {
        color: '#0057FF',
        background: 'rgba(0,87,255,0.1)',
      }, {
        color: '#16D356',
        background: 'rgba(22,211,86,0.1)',
      }, {
        color: '#FFC123',
        background: 'rgba(255,193,35,0.1)',
      }], //顔色
      // 下单时的商品数据
      allPrice: '3373.00',
      goodSpecAct: 0, //默认规格选择第一个
      goodAct: {
        id: 1001,
        title: '空调',
        image: 'https://img2.baidu.com/it/u=3597756135,179698068&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=24043e4e9fb78f26c6f85e62aa0f87c2',
        goodSpec: [{
          price: '160.00',
          cont: '空调清洗（拆机洗）'
        }, {
          price: '100.00',
          cont: '空调清洗（不拆机洗）'
        }, {
          price: '240.00',
          cont: '空调维修'
        }]
      }, //默认显示的规格
      goodsList: [{
        id: 1001,
        title: '空调',
        image: 'https://img2.baidu.com/it/u=3597756135,179698068&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=24043e4e9fb78f26c6f85e62aa0f87c2',
        goodSpec: [{
          price: '160.00',
          cont: '空调清洗（拆机洗）'
        }, {
          price: '100.00',
          cont: '空调清洗（不拆机洗）'
        }, {
          price: '240.00',
          cont: '空调维修'
        }]
      }, {
        id: 1002,
        title: '洗衣机',
        image: 'https://img2.baidu.com/it/u=3597756135,179698068&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=24043e4e9fb78f26c6f85e62aa0f87c2',
        goodSpec: [{
          price: '160.00',
          cont: '洗衣机清洗（拆机洗）'
        }, {
          price: '100.00',
          cont: '洗衣机清洗（不拆机洗）'
        }, {
          price: '240.00',
          cont: '洗衣机维修'
        }]
      }, {
        id: 1003,
        title: '抽油烟机',
        image: 'https://img2.baidu.com/it/u=3597756135,179698068&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=24043e4e9fb78f26c6f85e62aa0f87c2',
        goodSpec: [{
          price: '160.00',
          cont: '油烟机清洗（拆机洗）'
        }, {
          price: '100.00',
          cont: '油烟机清洗（不拆机洗）'
        }, {
          price: '240.00',
          cont: '油烟机维修'
        }]
      }, {
        id: 1004,
        title: '抽油烟机',
        image: 'https://img2.baidu.com/it/u=3597756135,179698068&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=24043e4e9fb78f26c6f85e62aa0f87c2',
        goodSpec: [{
          price: '160.00',
          cont: '油烟机清洗（拆机洗）'
        }, {
          price: '100.00',
          cont: '油烟机清洗（不拆机洗）'
        }, {
          price: '240.00',
          cont: '油烟机维修'
        }]
      }],
      //评论数据
      commentslist: [],
      pageNum: 1,
      pageSize: 10,
      pagesStatus: false
    }
  },
  onReady() { },
  onLoad(opt) {
    that = this
    that.statusBarHeight = uni.getStorageSync('statusBarHeight')
    console.log('导航栏高度:', that.statusBarHeight);

    console.log(opt)
    if (opt.id) {
      this.id = opt.id; //

    }
  },
  computed: {
    canPop() {
      return this.totalnum > 0;
    },
    canpoptwo() {
      return this.ordersnum > 0;
    }
  },
  methods: {
    ordersshow() {
      uni.navigateTo({
        url: '/pagesHealth/healthOrders'
      })
    },
    stopshop() {
      if (this.canPop) {
        this.popshow = !this.popshow;
      } else {
      }
    },
    // 返回
    back() {
      uni.navigateBack()
    },
    moreshowClose() {
      if (this.moreShow) {
        this.moreShow = false
      }
    },
    // 更多
    moreclick() {
      this.moreShow = !this.moreShow;
    },
    //评论接口
    getcommentslist() {
      let obj = {
        merchantId: '12',
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        // merchantId:this.shoplistid
      }
      selectEvaluate(obj).then(res => {
        console.log('评论', res.data.length, this.pageNum)
        res.data.forEach(item => {
          item.evaluateImageList = item.evaluateAge.split(',')

        });
        if (this.pageNum === 1) {
          this.commentslist = res.data
        } else {
          this.commentslist = this.commentslist.concat(res.data)
        }
        if (res.data.length < 10) {
          this.pagesStatus = false
        } else {
          this.pagesStatus = true
        }
        console.log(this.commentslist)
      })
    },
    // 收藏
    collectionClick(star) {
      if (star == 'hasCollect') {
        this.hasCollect = false
      } else {
        this.hasCollect = true
      }
    },
    // 举报商家事件
    openReport() {
      this.reportpop = true;
      // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
      console.log(this.$refs);
      this.$nextTick(() => {
        that.$refs.uForm.setRules(that.reportRules);
      });
    },
    reportFormTypeConfirm(data) {
      this.reportForm.type = this.reportFormTypeSelector[data]
      console.log(data);
    },
    radioChange(e) {
      // console.log(e);
    },
    // 选中任一radio时，由radio-group触发
    radioGroupChange(e) {
      // console.log(e);
    },
    // 投诉商家
    reportSubmit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          this.reportcen = true;
          console.log("验证通过");
        } else {
          console.log("验证失败");
        }
      });
      let files = [];
      // 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
      files = this.$refs.uUpload.lists.filter(val => {
        return val.progress == 100;
      });
      // 如果您不需要进行太多的处理，直接如下即可
      // files = this.$refs.uUpload.lists;
      console.log(files);
      this.reportpop = false;
    },
    // 分享商家
    shareShops() {

    },
    changeAuth(){
			//这里是权限通过后执行自己的代码逻辑
			console.log('权限已授权，可执行自己的代码逻辑了');
      let that = this
      uni.makePhoneCall({
        phoneNumber: that.phoneAuth || "15952011111"
      });
      if (plus && plus.device) {
        plus.device.dial(that.phoneAuth || "15952011111", true);
      }
		},
    // 打电话
    phoneClick(phone) {
      this.phoneAuth = phone
     this.$refs['authpup'].open();
    },
    changeAct(item) {
      // 激活样式是当前点击的对应下标--list中对应id
      this.act = item.id;
      // 可以根据点击事件改变内容
      this.content = item;
      if (item.id == 1) {
        this.pageNum = 1
        this.pagesStatus = false
        this.getcommentslist()
      }
    },


  },
  onReachBottom() {
    console.log("触底");
    // 模拟的请求数据
    if (this.pagesStatus) {
      this.pageNum++
      this.getcommentslist()
    }
  },
}

</script>

<style scoped lang="scss">
@import "@/api/main.css";

.goodSpecActCss {
  padding: 8px 18rpx;
  color: #ffffff;
  background: #D12C25;
}

.goodSpecNoActCss {
  padding: 8px 18rpx;
  border: 1rpx solid #999999;
  color: #000000;
}

.content {
  min-height: 100vh;
  padding-bottom: 130rpx;

  ::v-deep .u-navbar::after {
    display: none !important;
  }

  .shopBox {
    .shopTitle {
      line-height: 50rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #333333;
      display: flex;
      align-items: baseline;
      color: #D12C25;
      font-size: 30rpx;

      .money {
        font-weight: bold;

        .big {
          font-size: 40rpx;
        }
      }

      .price {
        margin-left: 10rpx;
        color: #999;
        font-weight: normal;
        text-decoration: line-through;
      }
    }
  }

  .shopNav {
    display: flex;
    border-bottom: 1rpx solid #999999;
    background-color: white;
  }

  .nav-list {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 32rpx;
    color: #000000;
    line-height: 38rpx;
    text-align: center;
    font-style: normal;
    margin-right: 120rpx;
  }

  .nav-list .name {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 36rpx;
    color: #d12c25;
    line-height: 42rpx;
    text-align: center;
    font-style: normal;
  }

  .nav-list .line {
    margin-top: 5rpx;
    width: 64rpx;
    height: 4rpx;
    background-color: red;
    margin-left: 32rpx;
  }

  /* 内容 */
  .contenttabs {

    // padding-bottom: rpx;
    .comments {
      margin-bottom: 32rpx;
      border-bottom: 1rpx solid #ccc;

      .commentone {
        display: flex;

        .avatar {
          width: 68rpx;
          height: 68rpx;
          margin-right: 16rpx;
          border-radius: 50%;
        }

        .person {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 4rpx;
        }

        image {
          width: 24rpx;
          height: 22rpx;
        }

        .datatime {

          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          line-height: 28rpx;
          text-align: right;
          font-style: normal;
          text-transform: none;

        }
      }

      .commenttwo {
        margin-top: 24rpx;
      }
      .commentthree {
        display: flex;
        padding: 24rpx 0;
        flex-wrap: wrap;
        image {
          width: 212rpx;
          height: 140rpx;
          border-radius: 12rpx;
          margin-left: 14rpx;
        }
      }
    }

    .detail {
      // width: 686rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
      font-style: normal;

      .title {
        line-height: 33rpx;
        text-align: left;
        margin-bottom: 18rpx;
      }

      .cont {
        text-align: justified;
        text-transform: none;
        text-indent: 32rpx;
        line-height: 33rpx;
        margin-bottom: 32rpx;
      }

      .imgBottom {
        image {
          width: 686rpx;
          height: 356rpx;
          margin-top: 32rpx;
        }
      }

      .ServiceListCss {
        padding-left: 33rpx;
        line-height: 33rpx;
        margin-bottom: 32rpx;
      }
    }

  }

  .bottomshop {
    width: 100%;
    position: fixed;
    bottom: 0rpx;
    height: 130rpx;
    background: white;
    // display: flex;
    // justify-content: center;
    // margin-left: 32rpx;
    z-index: 999;
    .shopcar {
      width: 686rpx;
      height: 96rpx;
      background-color: #333333;
      border-radius: 176rpx;
      z-index: 999;
      display: flex;

      .popupbottom {
        position: fixed;
        bottom: 162rpx;
        left: 32rpx;
        z-index: 888;
      }

      .round {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-left: 32rpx;
        margin-top: -26rpx;
        position: relative;

        image {
          width: 100rpx;
          height: 100rpx;
        }

        .shoprightnum {
          width: 32rpx;
          height: 32rpx;
          background: #d12c25;
          position: absolute;
          right: 0;
          z-index: 999;
          top: 0;
          border-radius: 50% 50%;
          line-height: 32rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #ffffff;
          text-align: center;
          font-style: normal;
        }
      }

      .choose {
        width: 360rpx;
        height: 96rpx;
        margin-left: 32rpx;

        .chooseprice {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 40rpx;
          color: #ffffff;
          line-height: 96rpx;
          font-style: normal;
         
        }

        .choosegoods {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #ffffff;
          line-height: 28rpx;
          font-style: normal;
        }
      }

      .choosebutton {
        width: 174rpx;
        height: 96rpx;
        background: linear-gradient(270deg, #d12c25 0%, #d12c25 100%);
        border-radius: 0rpx 176rpx 176rpx 0rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 96rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
  }

}

.report {
  margin: 0 32rpx 200rpx 32rpx;
  padding: 32rpx 24rpx 0 24rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #000000;

  .reportlist {
    border: 1rpx solid #ccc;
    display: flex;
    align-items: center;
    margin-top: 24rpx;
    justify-content: space-between;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    padding: 24rpx;
  }
}
</style>